import React, { FC, useEffect, useState } from 'react';
import { ResourceCard, IResource } from '@/components';
import { getLoveResources } from '@/services/users';
import './index.less';

export const Love: FC = () => {

  const [lovedResources, setLovedResources] = useState<IResource[]>([]);

  useEffect(() => {
    (async () => {
      const { data } = await getLoveResources();
      setLovedResources(data);
    })();
  }, []);

  return (
    <div className='center-love'>
      {
        lovedResources.map(resource =>
          <ResourceCard
            key={ resource.id }
            className="center-love-resource"
            { ...resource }
          />
        )
      }
    </div>
  );
};
